<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员申请</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!--<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">-->
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/libs/animate.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/libs/material.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/style/base.css">
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/style/index.css">
    <!-- <link rel="stylesheet/less" type="text/css" href="/Public/projects/member/style/index.less"> -->
    <link rel="stylesheet" type="text/css" href="/Public/projects/member/style/LArea.css">

    <style>
        .selector-wrapper .selector-item{
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>

<div class="content for-apply none">
    <img class="header" style="width: 100%" src="/Public/projects/member/assets/image/img_apply_title.png">
    <div class="layout-blank40"></div>
    <div class="item-ico-text">
        <span class="item-ico sprite ico-2 v-center"></span>
        <div class="mdl-textfield mdl-js-textfield item-text">
            <input class="mdl-textfield__input " id="name" type="text">
            <label class="mdl-textfield__label">申请人姓名</label>
        </div>
    </div>
    <div class="item-ico-text">
        <span class="item-ico sprite ico-2 v-center"></span>
        <div class="mdl-textfield mdl-js-textfield item-text">
            <input class="mdl-textfield__input " id="mobile" type="text">
            <label class="mdl-textfield__label">手机号码</label>
        </div>
    </div>
    <div class="item-ico-text-cell">
        <span class="item-ico sprite ico-1 v-center"></span>
        <div class="mdl-textfield mdl-js-textfield item-text">
            <input class="mdl-textfield__input " id="code" type="text">
            <label class="mdl-textfield__label">验证码</label>
            <div class="cell">
                <span id="code-img" class="item-image img1 "></span>
                <span id="code-img-refresh" class="item-image img2 v-center sprite ico-5"></span>
            </div>
        </div>
    </div>
    <div class="item-ico-textx2">
        <span class="item-ico sprite ico-4 v-center"></span>
        <div class="mdl-textfield mdl-js-textfield item-text">
            <input class="mdl-textfield__input " id="sms" type="text">
            <label class="mdl-textfield__label">短信验证码</label>

            <span class="item-text2 v-center" id="get-sms">获取验证码</span>
        </div>
    </div>
    <div class="layout-blank40"></div>
    <div class="item-bottom relative">
        <button disabled id="register" class="item-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect ">
            注 册
        </button>
        <div class="item-text">
            <div class="wrapper">
                <span>已有账号，</span><span id="to-login" class="btn">请登陆</span>
            </div>
        </div>
    </div>
    <div class="layout-blank40"></div>

</div>

<div class="login-result mask none">
    <div class="dialog h-center v-center">
        <div class="header h-center"></div>
        <div class="text">
            <div class="text1 msg">信息填写有错误!</div>
            <div class="text2">请重新尝试!</div>
        </div>
    </div>
</div>

<div class="content for-apply-info none" >
    <div class="layout-blank10"></div>
    <div class="item-ico-label for-apply-info">
        <span class="item-ico sprite ico-10 v-center"></span>
        <span class="item-label title">选择会员类型</span>
    </div>
    <div class="layout-blank10"></div>
    <div class="layout-blank10"></div>
    <div class="selector-wrapper">
        <div class="selector-item"></div>
        <div class="selector-item"></div>
        <div class="selector-item"></div>
    </div>

    <div class="content-box for-apply-info">
        <div class="layout-blank10"></div>
        <div class="layout-blank10"></div>
        <div class="apply-type-string">
        </div>

        <div class="item-ico-label-imagexn">
            <span class="item-ico sprite ico-11 "></span>
            <span class="item-label ">上传照片</span>
            <div class="apply-type-image">
            </div>
        </div>
        <div class="layout-blank40"></div>
    </div>

    <div class="item-bottom relative">
        <button  id="submit" class="item-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect ">
            提 交
        </button>
    </div>
    <div class="layout-blank40"></div>


</div>

<div class="mask step-2 none">
    <div class="content-pop h-center">
        <p class="pop-title">只剩最后一步啦!</p>

        <div class="item-ico-textx2">
            <span class="item-ico sprite ico-14 v-center"></span>
            <div class="mdl-textfield mdl-js-textfield item-text">
                <input id="city-input" class="mdl-textfield__input" type="text">
                <label class="mdl-textfield__label">所在地区</label>
                <span id="choice-txt" class="item-text2 v-center">请选择 > </span>
                <i id="city-input-value" style="display: none"></i>
            </div>
        </div>
        <textarea id="address" class="item_textarea h-center" placeholder="请填写详细地址，不少于5个字"></textarea>

        <button id="cancel" class="cancel mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
            <i class="sprite ico-12 v-center h-center"></i>
        </button>
        <button id="confirm" class="confirm mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
            <i class="sprite ico-13 v-center h-center"></i>
        </button>
    </div>

</div>

<div class="dialog-mask mask none">
    <div class="dialog h-center v-center">
        <div class="header h-center"></div>
        <div class="text">
            <div class="text1" id="msg">登录失败!</div>
        </div>
    </div>
</div>

<script src="/Public/projects/member/libs/jquery-3.1.1.js"></script>
<!-- <script src="/Public/projects/member/libs/less.js"></script> -->
<script src="/Public/projects/member/libs/material.js"></script>
<!--common of all js file-->
<script src="/Public/projects/member/js/LAreaData2.js"></script>
<script src="/Public/projects/member/js/LArea.js"></script>
<script src="/Public/projects/member/js/newswiper.js"></script>
<script src="/Public/projects/member/js/common.js"></script>
<!--add self scrip file-->

<script>
    // apply
    $(function () {
        $(".content.for-apply").removeClass("none");
        $(".content.for-apply-info").addClass("none");


        var info = {};
        ns.cache.setData("info",info);

        $("input").on("focus",function () {
            $(this).next("label").addClass("focus");
        });
        $("input").on("blur",function () {
            $(this).next("label").removeClass("focus");
        });

        var contextId = ns.getLocationParams()["id"];
        localStorage.setItem("contextId",contextId);

        var
                nameFlag = true
                ,mobileFlag = false
                ,verifyTxtFlag = false
                ,verifySmsFlag = false
                ;
        /*$("#name").on("input",function (e) {
            nameFlag = $(this).val().length > 0 ;
            checkLoginVisible();
        });*/
        $("#mobile").on("input",function (e) {
            mobileFlag = ns.verify("mobile",$(this).val()) ;
            checkLoginVisible();
        });
        $("#code").on("input",function (e) {
            verifyTxtFlag = $(this).val().length == 5 ;
            checkLoginVisible();
        });
        $("#sms").on("input",function (e) {
            verifySmsFlag = $(this).val().length == 4 ;
            checkLoginVisible();
        });

        $("#to-login").tap(function (e) {
            var url = ns.genServerApiUrl("login?id="+contextId);
            ns.navigate(url);
        });

        function checkLoginVisible() {
            if(nameFlag && mobileFlag && verifyTxtFlag && verifySmsFlag){
                $("#register").attr("disabled",false);
            }else{
                $("#register").attr("disabled",true);
            }
        }

        $(".mask.login-result").tap(function (e) {
            $(this).addClass("none");
        });

        $(".dialog-mask").tap(function (e) {
            $(".dialog-mask").addClass("none");
        });
        function showDialog(txt) {
            var dialog = $(".dialog-mask");
            dialog.removeClass("none");
            dialog.find("#msg").html(txt);
        }

        $("#register").tap(function (e) {
            //会员验证
            /*
             id	    int	    是	contextId
             phone	string	是	电话号码
             code	string	是	图片验证码
             sms	string	是	短信验证码
             **/
            var
                    name = $("#name").val()
                    ,phone = $("#mobile").val()
                    ,code = $("#code").val()
                    ,sms =  $("#sms").val();

            ns.ajax({
                url:"indexNext",
                data:{
                    id: contextId,
                    phone: phone,
                    code: code,
                    sms: sms
                }
                ,success:function (result) {
                    ns.log(result);
                    if(result["status"] == 1){
                        $(".content.for-apply").addClass("none");
                        $(".content.for-apply-info").removeClass("none");
                        info["name"] = name;
                        info["phone"] = phone;
                    }else{
                        showDialog(result["result"]);
                    }
                }
            });
        });

        function refreshCodeImg() {
            $("#code-img").css("background-image","none");
            $("#code-img").css(
                    "background-image",
                    "url("+ns.genServerApiUrl("getVerify?id="+contextId)+")");
        }
        $("#code-img ,#code-img-refresh").tap(refreshCodeImg);
        refreshCodeImg();

        var
                smsVisible = true
                ,counter = 60
                ;
        var $getVerifySms = $("#get-sms");
        function countdown() {
            if(counter < 0){
                counter = 60;
            }
            if(smsVisible) smsVisible = false;
            $getVerifySms.html(counter + "s后重新获取");
            counter--;
            if(counter === 0) {
                $getVerifySms.html("获取验证码");
                smsVisible = true;
                return;
            }
            setTimeout(countdown ,1000);
        }
        $getVerifySms.tap(function (e) {
            if(!smsVisible) return;
            //获取验证码（60s后重新获取）
            var
                    phone = $("#mobile").val()
                    ;
            if(!mobileFlag){
                showDialog("手机号码格式不正确");
                return;
            }
            countdown();
            ns.ajax({
                url:"getSms",
                data:{
                    id: contextId,
                    phone: phone
                }
                ,success:function (result) {
                    ns.log(result);
                    //showDialog(result["result"]);
                }
            });
        });

        var page = ns.getLocationParams()["page"];
        if(page == 2){
            $(".content.for-apply").addClass("none");
            $(".content.for-apply-info").removeClass("none");
            info["name"] = ns.getLocationParams()["name"];
            info["phone"] = ns.getLocationParams()["phone"];
            
        }
        ns.cache.setData("page",page);
    })
</script>

<script>
    //apply_info
    $(function () {
        var info = ns.cache.getData("info");
        var contextId = ns.getLocationParams()["id"];

        if(ns.getLocationParams()["page"] == 1){
            $(".content.for-apply").addClass("none");
            $(".content.for-apply-info").removeClass("none");
        }
        var curIdx = -1 ;
        ns.ajax({
            url:"getClass",
            data:{
                id: contextId
            }
            ,success:function (result) {
                var arr = result["member_class"];
                info["classes"] = arr;
                initSwiper(arr.length);
                var $items = $(".selector-wrapper .selector-item");
                for(var i=0 ,len=$items.length; i<len ;i++){
                    $items.eq(i).css("background-image", "url("+arr[i]["picurl"]+")");
                }
                updateInfo(0);
            }
        });
        function initSwiper(cnt) {
            var $wrapper = $(".selector-wrapper");
            $wrapper.empty();
            while(cnt--){
                $wrapper.append('<div class="selector-item"></div>');
            }
            var swiper = new ns.NewSwiper(".selector-wrapper");
            swiper.on("end",function (event) {
//                ns.log(event);
                updateInfo(swiper.curIdx);
            });
        }

        var t_str = '<div class="item-ico-text for-text-value">\
                    <span class="item-ico sprite ico-9 v-center"></span>\
                    <div class="mdl-textfield mdl-js-textfield item-text">\
                    <input class="mdl-textfield__input" type="text">\
                    <label class="mdl-textfield__label"></label>\
                    </div>\
                    </div>';
        var t_img = '<div class="item-image for-img-holder">\
                        <div class="content-item sprite ico-6 h-center v-center"></div>\
                        <div class="content-item label-for-img h-center "></div>\
                        <input class="img-holder-input" type="file">\
                        </div>';
        function updateInfo(idx) {
            var prevIdx = curIdx;
            if(false && prevIdx !== -1 && prevIdx !== idx){
                var prevClsObj = info["classes"][prevIdx];
                var prevClsProps = prevClsObj["props"];
                var $strContainer = $(".apply-type-string");
                var $strArr = $strContainer.children();
                var $imageContainer = $(".apply-type-image");
                var $imgArr = $imageContainer.children();

                for(var i=0 ,len=prevClsProps.length ; i< len ;i++){
                    //property_id
                    var prop = prevClsProps[i];
                    var $item = $strArr.filter("[data-id="+ prop["property_id"] +"]");
                    if($item.length == 0){
                        $item = $imgArr.filter("[data-id="+ prop["property_id"] +"]");
                    }
                    if($item.length == 0){
                        ns.log("[data-id="+ prop["property_id"] +"]" + " can not find!");
                    }
                    if($item.is(".for-text-value")){
                        prop["value"] = $item.find("input").val();
                    }else{
                        prop["value"] = $item.attr("data-result");
//                        prop["image-name"] = $item.attr("data-name");
                    }
                }
            }

            curIdx = idx;
            var clsObj = info["classes"][curIdx];
            var clsProps = clsObj["props"];
            if(!clsProps){
                ns.ajax({
                    url:"getExt",
                    data:{
                        id: contextId
                        ,class_id : clsObj["class_id"]
                    }
                    ,success:function (result) {
                        clsObj["props"] = result["ext"];
                        updateInfo(curIdx);
                    }
                })
            }
            else {
                var $strContainer = $(".apply-type-string");
                var $strArr = $strContainer.children();

                var $imageContainer = $(".apply-type-image");
                var $imgArr = $imageContainer.children();

                $strArr.addClass("none");
                $imgArr.addClass("none");

                var $item , strIdx = 0 ,imgIdx = 0;
                for(var i=0 ,len=clsProps.length; i<len ;i++){
                    var prop = clsProps[i];
                    if(prop["format"] == 0){
                        if(i < $strArr.length){
                            $item = $strArr.eq(i);
                            $item.removeClass("none");
                            $item.find("input").val(prop["value"]);
                        }else{
                            $strContainer.append(t_str);
                            $item = $strContainer.children().last();
                        }
                        $item.find("label").html(prop['name']);
                        $item.attr("data-id", prop['property_id']);
                    }else if(prop["format"] == 1){
                        if(i < $imgArr.length){
                            $item = $imgArr.eq(i);
                            $item.removeClass("none");
                            if(prop["value"]){
                                $item.css("background-image","url("+prop["value"]+")");
                                $item.attr('data-result',prop["value"]);
                            }else{
                                $item.css("background-image","none");
                                $item.attr('data-result',"");
                            }
                        }else{
                            $imageContainer.append(t_img);
                            $item = $imageContainer.children().last();
                        }
                        $item.find(".label-for-img").html(prop['name']);
                        $item.attr("data-id", prop['property_id']);
                    }
                }
                window.componentHandler.upgradeDom();
                $imageContainer.find("input.img-holder-input").on("change",uploadImg);
            }

        }

        $(".dialog-mask").tap(function (e) {
            $(".dialog-mask").addClass("none");
            
        });

        function showDialog(txt) {
            var dialog = $(".dialog-mask");
            dialog.removeClass("none");
            dialog.find("#msg").html(txt);
        }

        $("#submit").tap(function (e) {

            var prevClsObj = info["classes"][curIdx];
            var prevClsProps = prevClsObj["props"];
            var $strContainer = $(".apply-type-string");
            var $strArr = $strContainer.children();
            var $imageContainer = $(".apply-type-image");
            var $imgArr = $imageContainer.children();

            for(var i=0 ,len=prevClsProps.length ; i< len ;i++){
                //property_id
                var prop = prevClsProps[i];
                var $item = $strArr.filter("[data-id="+ prop["property_id"] +"]");
                if($item.length == 0){
                    $item = $imgArr.filter("[data-id="+ prop["property_id"] +"]");
                }
                /*if($item.length == 0){
                    console.error("[data-id="+ prop["property_id"] +"]" + " can not find!");
                }*/
                if($item.is(".for-text-value")){
                    prop["value"] = $item.find("input").val();
                }else{
                    prop["value"] = $item.attr("data-result");
//                        prop["image-name"] = $item.attr("data-name");
                }
            }

            showMask();
        });
        function hideMask() {
            $("html,body").removeClass("fixed");
            $(".step-2").addClass("none");
        }
        function showMask() {
            $("html,body").addClass("fixed");
            $(".step-2").removeClass("none");
        }
        $("#cancel").tap(function (e) {
            hideMask();
        });
        $("#confirm").tap(function (e) {
            var info = ns.cache.getData('info');
            var choiceIds = $("#city-input-value").val().split(",");
            var addr = $("#address").val();
            var
                    name = info["name"]
                    ,phone = info["phone"]
                    ,province =choiceIds[0]
                    ,city=choiceIds[1]
                    ,district=choiceIds[2]
                    ,address=addr
                    ,classDataArr=info["classes"]
            ;
            var myClasses = {};
            var clsObj = classDataArr[curIdx];
            var props = clsObj["props"];
            var myProps = myClasses[clsObj["class_id"]] = [];
            for(var j=0 ,jLen=props.length; j<jLen ;j++){
                var prop = props[j];
                var temp = {};
                temp[prop["property_id"]] = prop["value"];
                myProps.push(temp);
            }
            ns.ajax({
                url:"add",
                type: "POST",
                data:{
                    id: contextId,
                    phone: phone,
                    name:name,
                    province:province,
                    city:city,
                    district:district,
                    address:address,
                    class:myClasses
                }
                ,success:function (result) {
                    ns.log(result);
                    showDialog(result["result"]);
                    if(result["status"] == 1){
                        setTimeout(function(){
                            var url = ns.genServerApiUrl("login?id=" + contextId);
                            // ns.navigate("login.html?id="+contextId);
                            ns.navigate(url);
                        },2000)
                    }
                }
            });
        });

        function uploadImg(event) {
            var img = event.target.files[0];
            var $this = $(event.target);
            // 判断是否图片
            if(!img) return ;
            // 判断图片格式
            if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png)$/.test(img.name)) ){
                alert('图片只能是jpg,png');
                return ;
            }
            var reader = new FileReader();
            reader.readAsDataURL(img);
            reader.onload = function(e){
                var $parent = $this.parent();
                $parent.css("background-image", "url("+e.target.result+")");
                $parent.attr('data-result',e.target.result);
            }
        }

    });

    $(function () {
        function initArea(provs_data, citys_data, dists_data) {
            var area1 = new LArea();
            area1.init({
                'inputDom': '#city-input', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
                'triggers':'#choice-txt',
                'valueTo': '#city-input-value', //选择完毕后id属性输出到该位置
                'keys': {
                    id: 'id',
                    name: 'regionname'
                },
                'type': 2,
                'data': [provs_data, citys_data, dists_data]
            });
        }

        var contextId = ns.getLocationParams()["id"];
        var execute = (function () {
            var count = 0 , requests , finalCall;
            function check() {
                if(count === 0){
                    ns.log("count == 0 , done!");
                    finalCall && finalCall();
                }
            }
            return function (arr ,cb) {
                requests = arr;
                finalCall = cb;
                count = requests.length;
                for(var i=0 ;i<count ;i++){
                    requests[i].call(null ,function () {
                        count--;
                        check();
                    });
                }
            }
        })();

        var provs_data, citys_data, dists_data;
        execute([
            function (cb) {
                ns.ajax({
                    url:"getProvince",
                    data:{id: contextId}
                    ,success:function (result) {
                        provs_data = result["province"];
                        cb && cb();
                    }
                });
            }
            ,function (cb) {
                ns.ajax({
                    url:"getCity",
                    data:{id: contextId}
                    ,success:function (result) {
                        citys_data = result["city"];
                        cb && cb();
                    }
                });
            }
            ,function (cb) {
                ns.ajax({
                    url:"getDistrict",
                    data:{id: contextId}
                    ,success:function (result) {
                        dists_data = result["district"];
                        cb && cb();
                    }
                });
            }
        ],function(){initArea(provs_data, citys_data, dists_data)});

    });

</script>

<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?80e42c68052dc7b0d359cd50f98083d3";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>